<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />

    <!-- 样式 -->
    <link rel="stylesheet" href="../../static/mobile/default/js/Swiper-4.0.7/swiper.min.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/assets/css/all.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/my.css" />

    <link rel="stylesheet" href="../../static/mobile/default/css/index.css" />


    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
        
        .user_info_cells {
            background-color: #f8f8f8;
            color: #464646;
            padding: 0.2rem 0;
            margin-bottom: 0;
        }
        
        .weui-cell {
            background-color: #fff;
        }
        
        .go_user_info {
            position: relative;
        }
        
        .go_user_info .userName {
            font-weight: 700;
        }
        
        .go_user_info::after {
            content: "";
            position: absolute;
            top: .24rem;
            right: .24rem;
            width: .1333rem;
            height: .1333rem;
            border-top: .0533rem solid #e1127c;
            border-right: .0533rem solid #e1127c;
            transform: rotate(45deg);
        }
        
        .res_week {
            background-color: #fff;
            border-radius: 0.133333rem;
            margin: 0 0.133333rem 0.133333rem 0.133333rem;
        }
        
        .res_week h4 {
            text-align: center;
            font-size: 0.2rem;
            color: #333333;
            font-weight: 400;
            padding-top: .08rem;
        }
        
        .res_proj {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: .6667rem;
            line-height: .6667rem;
        }
        
        .res_proj em {
            font-weight: 700;
            font-size: .48rem;
            color: #e1127c;
            margin-right: .1333rem;
        }
        
        .res_proj_left {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .2133rem;
            color: #121212
        }
        
        .res_proj_left img {
            width: .5rem;
            height: .5rem;
            margin-left: .1333rem;
        }
        
        .res_proj_left span {
            margin-left: .1333rem;
        }
        
        .res_all {
            background-color: #fff;
            border-radius: 0.133333rem;
            margin: 0 0.133333rem 0.133333rem 0.133333rem;
        }
        
        .res_all h4 {
            text-align: center;
            font-size: 0.2rem;
            color: #333333;
            font-weight: 400;
            padding-top: .08rem;
        }
        
        .res_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: .6667rem;
            line-height: .6667rem;
        }
        
        .res_item span {
            margin-left: .1333rem;
            font-size: .2133rem;
            color: #121212
        }
        
        .res_item em {
            font-weight: 700;
            font-size: .24rem;
            color: #716f70;
            margin-right: .1333rem;
        }
        
        .res_nav {
            display: flex;
            /* background-color: #fff; */
            border-radius: 0.133333rem;
            margin: .2667rem 0.133333rem 0.133333rem;
            justify-content: space-between;
        }
        
        .res_nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .res_nav a img {
            margin-top: .08rem;
            margin-bottom: .08rem;
            width: .5333rem;
            height: .5333rem;
        }
        
        .res_case_tile {
            display: flex;
            /* background-color: pink; */
            justify-content: space-between;
            margin: .2667rem .1333rem;
        }
        
        .res_case_tile h4 {
            font-size: .2667rem;
            font-weight: 700;
            color: #000;
        }
        
        .res_case_tile a {
            position: relative;
            padding-right: .2133rem;
            text-align: center;
        }
        
        .res_case_tile a::after {
            content: "";
            position: absolute;
            top: .0533rem;
            right: .0267rem;
            width: .08rem;
            height: .08rem;
            border-top: .0533rem solid #747474;
            border-right: .0533rem solid #747474;
            transform: rotate(45deg);
        }
        
        .res_case_ctx {
            background-color: #fff;
            border-radius: 0.133333rem;
            margin: 0 0.133333rem 0.133333rem 0.133333rem;
            padding-bottom: .2133rem;
        }
        
        .res_case_hd {
            height: .64rem;
            line-height: .64rem;
            border-bottom: .0213rem solid #ccc;
            padding-bottom: .08rem;
            text-align: center;
        }
        
        .res_case_hd img {
            float: left;
            width: .4267rem;
            margin-left: .2133rem;
            margin-top: .08rem;
            /* vertical-align: text-bottom; */
            border-radius: 50%;
        }
        
        .res_case_hd span {
            float: left;
            font-size: .2133rem;
            color: #1a1715;
            text-align: center;
            margin-left: .1333rem;
        }
        
        .res_case_hd em {
            float: right;
            font-size: .1875rem;
            color: #be874d;
            text-align: center;
            margin-right: .2133rem;
        }
        
        .res_case_bd img {
            float: left;
            width: 32%;
            height: 1.2rem;
            margin: .1333rem;
        }
        
        .res_case_bd .res_case_remark {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            float: left;
            width: 54%;
            height: 1.2rem;
            margin: .1333rem;
        }
        
        .res_case_bd .res_case_remark p {
            height: .8rem;
            font-size: .16rem;
            color: #747474;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
        
        .res_time {
            float: left;
        }
        
        .res_like {
            float: right;
            font-size: .16rem;
            color: #747474;
        }

        .empeyOrder {
            background-color: #fff;
            bottom: 0;
            top: 0.8rem;
        }

        .empeyOrder img {
            width: 100%;
        }

        .empeyOrder span {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            padding-bottom: 0.266667rem;
        }
    </style>

    <title>首页 - 孝邻会</title>
</head>

<body>
    <!-- 整体页面部分 -->
    <div class="page">
        <!-- 页面头部 -->
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">首页 - 孝邻会</div>
                <div class="header-right">
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <!-- 页面内容-->
        <div class="page-bd">
            <!-- 用户信息 -->
            <div class="user_info_cells">
                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <div class="avatar">
                            <a style="width: 100%;height: 100%;" href="../../member/center/userinfo.html">
                                <img src="../../static/mobile/default/images/defheadimg.jpg" alt="" class="headImage"></a>
                        </div>
                    </div>
                    <a href="../../member/center/userinfo.html" class="weui-cell__bd go_user_info">
                        <div class="fs30 userName"></div>
                        <div>
                            <span class="fs26 mr10">ID：<span class="id"></span></span>
                            <span class="level"></span>
                        </div>
                        <div class="fs26" style="display: flex;    align-items: center;">会籍到期日：<span class="reference fs26"></span></div>
                    </a>
                </div>
            </div>

            <!-- 本周事业足迹 -->
            <div class="res_week">
                <h4>本周事业足迹</h4>
                <a href="thankslist.html" class="res_proj">
                    <div class="res_proj_left">
                        <img src="../../static/assets/images/res/4.png" />
                        <span>感谢函</span>
                    </div>
                    <em class="get_week0"></em>
                </a>
                <a href="recommendlist.html" class="res_proj">
                    <div class="res_proj_left">
                        <img src="../../static/assets/images/res/8.png" />
                        <span>引荐单</span>
                    </div>
                    <em class="get_week1"></em>
                </a>
                <a href="trainlist.html" class="res_proj">
                    <div class="res_proj_left">
                        <img src="../../static/assets/images/res/7.png" />
                        <span>会员聚会记录</span>
                    </div>
                    <em class="get_week2"></em>
                </a>
                <a href="visitlist.html" class="res_proj">
                    <div class="res_proj_left">
                        <img src="../../static/assets/images/res/9.png" />
                        <span>探访记录单</span>
                    </div>
                    <em class="get_week3"></em>
                </a>
            </div>

            <!-- 所有 -->
            <div class="res_all">
                <h4>个人所有</h4>
                <a href="#" class="res_item">
                    <span>给出引荐</span>
                    <em class="get_total0"></em>
                </a>
                <a href="#" class="res_item">
                    <span>收到引荐</span>
                    <em class="get_total1"></em>
                </a>
                <a href="#" class="res_item">
                    <span>给出生意成交金额</span>
                    <em class="get_total3"></em>
                </a>
                <a href="#" class="res_item">
                    <span>收到生意成交金额</span>
                    <em class="get_total2"></em>
                </a>
                <a href="#" class="res_item">
                    <span>企业探访</span>
                    <em class="get_total4"></em>
                </a>
                <a href="#" class="res_item">
                    <span>CEUs</span>
                    <em class="get_total5"></em>
                </a>
            </div>

            <!-- 所有 -->
            <div class="res_all">
                <h4>本分会成交金额</h4>
                <a href="#" class="res_item">
                    <span>给出生意成交金额</span>
                    <em class="get_total6"></em>
                </a>
                <a href="#" class="res_item">
                    <span>收到生意成交金额</span>
                    <em class="get_total7"></em>
                </a>
                <a href="visitlistall.html" class="res_item">
                    <span>企业探访</span>
                    <em class="get_total8"></em>
                </a>
            </div>

            <!-- 导航栏 -->
            <div class="res_nav">
                <a href="userlist.html">
                    <img src="../../static/assets/images/res/17.png" />
                    <p>分会会员</p>
                </a>
                <a href="javascript: _alert('此功能暂不开放');">
                    <img src="../../static/assets/images/res/18.png" />
                    <p>全球通</p>
                </a>
                <a href="addcase.html">
                    <img src="../../static/assets/images/res/19.png" />
                    <p>发布需求</p>
                </a>
                <a href="javascript: _alert('此功能暂不开放');">
                    <img src="../../static/assets/images/res/20.png" />
                    <p>公司奖励</p>
                </a>
            </div>

            <!-- 公司资讯标题 -->
            <div class="res_case_tile">
                <h4>公司资讯</h4>
            </div>
            <!-- 公司资讯内容 -->
            <div class="swiperGird" style="background-color: #fff;">
                <div class="swiper-container swiper1" id="swiper01">
                    <div class="swiper-wrapper">
                    </div>
                    <div class="swiper-pagination pagination1"></div>
                </div>
                <!-- 功能入口 -->
            </div>

            <!-- 热门需求标题 -->
            <div class="res_case_tile">
                <h4>热门需求</h4>
                <a href="#">查看更多</a>
            </div>

            <!-- 热门需求内容 -->
            <div class="block allBox"></div>

            <script id="TagTpl" type="text/html">
                {{each data as hotCase index}}
                <div class="res_case_ctx">
                    <div class="res_case_hd clearfix">
                        <img src="{{hotCase.userIcon}}" alt="" />
                        <span>{{hotCase.userName}}</span>
                        <em>{{if hotCase.status==1}}进行中{{else if hotCase.status==2}}已完成{{/if}}</em>
                    </div>
                    <a href="casedetail.html?caseId={{hotCase.id}}" class="res_case_bd clearfix">
                        <img src="{{hotCase.casePic}}" alt="" />
                        <div class="res_case_remark">
                            <p>{{hotCase.caseDesc}}</p>
                            <span><em class="res_time">{{hotCase.addTimeStr}}</em><em class="res_like">{{hotCase.cnt}}人感兴趣</em></span>
                        </div>
                    </a>
                </div>
                {{/each}}
            </script>
            <!-- 没有热门需求-->
            <script type="text/html" id="emptyTpl">
                <div class="empeyOrder">
                    <img src="/static/mobile/default/images/emptyData.png" alt="">
                    <span class="fs28 color_3">暂无热门需求</span>
                </div>
            </script>
        </div>
        <!-- 版权 -->
        <div class="copyright">
            Copyright © 达漂亮<br>
        </div>
        <!-- 底部导航 -->
        <div class="bottom-tabbar-wrapper">
            <div class="bottom-tabbar">
                <a href="../../index.html" class="bottom-tabbar__item">
                    <span class="icon">
                        <img src="../../static/menuimg/footer_index_a.png" />
                        <img class="lhimg" src="../../static/menuimg/footer_index_b.png" />
                    </span>
                    <p class="label">首页</p>
                </a>
                <a href="../../static/res/index.html" class="bottom-tabbar__item active">
                        <span class="icon">
                            <img src="../../static/assets/images/res/10.png" />
                            <img class="lhimg" src="../../static/assets/images/res/11.png" />
                        </span>
                    <p class="label">孝邻会</p>
                </a>
                <a href="../../shop/order/index.html" class="bottom-tabbar__item">
                    <span class="icon">
                        <img src="../../static/menuimg/footer_cat_a.png" />
                        <img class="lhimg" src="../../static/menuimg/footer_cat_b.png" />
                    </span>
                    <p class="label">我的订单</p>
                </a>
                <a href="../../member/center/index.html" class="bottom-tabbar__item">
                    <span class="icon">
                        <img src="../../static/menuimg/footer_user_a.png" />
                        <img class="lhimg" src="../../static/menuimg/footer_user_b.png" />
                    </span>
                    <p class="label">我的</p>
                </a>
            </div>
        </div>
    </div>

    <!-- alert弹窗部分 -->
    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>

    <!-- js -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="../../static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>
    <script src="../../static/js/art-template.js"></script>
    <script src="../../static/mobile/default/js/lib/fastclick.js"></script>
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>

    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/js/jquery/lazyload/jquery.lazyload.js"></script>

    <script src="../../static/mobile/default/js/Swiper-4.0.7/swiper.min.js"></script>

    <!-- 页面js部分 -->
    <script>
        //==获取用户信息
        function getUserInfo() {
            var test = $.cookie('code')
            console.log(test)
            $.ajax({
                url: 'https://mp.jianguoes.com/api/mp/getUserInfo', // 跳转到 action
                data: {},
                type: 'get',
                headers: {
                    token: $.cookie('code')
                },
                dataType: 'json',
                success: function(res) {
                    console.log(res);
                    if (res.errno == 0) {
                        if(res.data.realName){
                            $('.userName').text(res.data.realName)
                        }else{
                            $('.userName').text(res.data.nickname)
                        }

                        $('.id').text(5000000 + Number(res.data.userId))

                        $('.reference').text(res.data.endDate)

                        $('.headImage').attr("src", res.data.avatar)

                        if (res.data.user_level_id == 1) {
                            $('.level').text('游客')
                        } else if (res.data.user_level_id == 2) {
                            $('.level').text('VIP')
                        } else if (res.data.user_level_id == 3) {
                            $('.level').text('合伙人')
                        } else if (res.data.user_level_id == 4) {
                            $('.level').text('大区合伙人')
                        } else if (res.data.user_level_id == 5) {
                            $('.level').text('联合创始人')
                        } else if (res.data.user_level_id == 6) {
                            $('.level').text('战略合作商')
                        } else if (res.data.user_level_id == 7) {
                            $('.level').text('总公司')
                        }
                    }

                },
                error: function() {

                }
            });
        }

        //==获取首页汇总信息
        function getIndexSummary() {
            var test = $.cookie('code')
            $.ajax({
                url: 'https://mp.jianguoes.com/api/res/indexSummary', // 跳转到 action
                data: {},
                type: 'get',
                headers: {
                    token: $.cookie('code')
                },
                dataType: 'json',
                success: function(res) {
                    console.log(res);
                    if (res.errno == 0) {
                        if(res.data.footmarkList && res.data.footmarkList.length == 4){
                            for(var i = 0; i < res.data.footmarkList.length; i++){
                                $('.get_week'+i).text(res.data.footmarkList[i] + "+");
                            }
                        }

                        if(res.data.totalList && res.data.totalList.length == 9){
                            for(var i = 0; i < res.data.totalList.length; i++){
                                $('.get_total'+i).text(res.data.totalList[i]);
                            }
                        }
                    }
                },
                error: function() {

                }
            });
        }

        //== 获取热门需求
        /**
         * nowPage: 当前页
         * getAgain： 是否重新加载
         * isLoadend： 是否到底了
         * 
         * */
        var nowPage = [],getAgain = [],isLoadend = [];// 这里用数组的原因是可能有tab
        var _type = 'all';
        function getList(isagain) {
            page = nowPage[_type];// 找不到all的属性，page的结果是undefined
            if (typeof(page) == 'undefined') page = 1;// 初始化为第一页
            if (isLoadend[_type] == true ) return false;// 如果到底了，就不在请求了
            // 重新请求
            if (isagain == true){
                if (getAgain[_type] == false) return false;// 内部标记为false，就不用再重新请求了
                getAgain[_type] = false;// 不用再重新请求了
            }else{
                // 显示加载中
                $('.'+_type+'Box').append('<div class="get_list_tip" data-type="'+_type+'">加载数据中...</div>');
            }
            // 默认就到底了
            isLoadend[_type] = true;
            $.ajax({
                url:'https://mp.jianguoes.com/api/res/hotCases',// 跳转到 action
                data:{page:page,size:10},
                type:'get',
                headers:{'token': $.cookie('code')},
                dataType:'json',
                success:function(res) {
                    // 成功后，表示还没有到底
                    isLoadend[_type] = false;
                    if(res.errno  != 0 ){
                        _alert(res.errmsg);
                        // 获取数据失败，需要重新获取
                        getAgain[_type] = true;
                        $('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
                        return false;
                    }
                   
                    $('.'+_type+'Box').find('.get_list_tip').remove();
                    if (res.data.data.length>0){
                        $('.'+_type+'Box').append(template('TagTpl',res.data));
                    }else{
                        $('.'+_type+'Box').html(template('emptyTpl'));
                    }

                    if (res.data.totalPages == 0 || res.data.totalPages == page) {
                        $('.'+_type+'Box').append('<div class="get_list_tip">---我也有底线的---</div>');
                        // 真的到底了
                        isLoadend[_type] = true;
                    }else{
                        // 请求下一页
                         nowPage[_type] = page+1;
                    }
                },error : function() {
                    // 还没有到底
                    isLoadend[_type] = false;
                    // 要重新请求
                    getAgain[_type] = true;
                    $('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
                }
            });
        }

    </script>

    <script>

        function createSwiper(index, _direction, time, type) {
            var swiper = new Swiper(".swiper" + index, {
                pagination: {
                    el: ".pagination" + index,
                    type: type
                },
                // lazy: {
                //     loadPrevNext: true,
                // },
                direction: _direction,
                preloadImages: false,
                paginationClickable: true,
                loop: true,
                autoplay: {
                    delay: time,
                    disableOnInteraction: false
                },
                onSlideChangeEnd: function (swiper) {
                    swiper.update(); //swiper更新
                },
                on: {
                    slideChangeTransitionStart: function () {
                        if (index == 1) {
                            var bg_color = $('#swiper01').find('a').eq(this.activeIndex).data('bg_color');
                            $('.swiperGird').css('background-color', bg_color);
                        }
                    },
                },
            });
            return swiper;
        }
        function createSwiper01() {
            var length = $('.groupBox .grouplist .swiper-slide').length;
            var is_true = length > 1 ? true : false;
            var el = is_true == true ? ".pagination3" : "null";
            var swiper = new Swiper(".swiper3", {
                pagination: {
                    el: el,
                    clickable: true
                },
                loop: is_true,
                onSlideChangeEnd: function (swiper) {
                    swiper.update(); //swiper更新
                }
            });
            return swiper;
        }

        //获取banner数据
        function getbannerData() {
            var swiper = $('.swiper-wrapper')
            var Concent = ''
            $.ajax({
                url: 'https://mp.jianguoes.com/api/res/banner',
                type: 'get',
                headers:{'token': $.cookie('code')},
                dataType: 'json',
                success: function (res) {

                    for (let index = 0; index < res.data.banner.length; index++) {
                        Concent += `<a href="` + res.data.banner[index].link + `" class="swiper-slide" bg_color="#ffffff">
                            <img src="`+ res.data.banner[index].image_url + `" class="swiper-lazy">
                        </a>`

                    }
                    swiper.html(Concent)
                    var swiper1 = createSwiper(1, 'horizontal', 4000, 'fraction');
                }, error: function () {

                }
            });
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            FastClick.attach(document.body);
            $("img.lazy").lazyload({
                effect: "fadeIn",
                event: "scroll",
                container: $(".page-bd")
            });

            var swiper2 = createSwiper(2, 'vertical', 5000, 'bullets');
            var swiper3 = createSwiper01();

            getbannerData();
        });

        getUserInfo();

        getIndexSummary();

        getList();

        // 重新请求数据
        $(document).on('click','.get_list_tip',function () {
            getList(true);
        });
        // 页面下拉事件
        // $('.page-bd').scroll(function(){
        //     var box_h=$(this).height()
        //     var content_h=$('.scrollBox').height()
        //     var scroll_h=$(this).scrollTop();
        //     if(content_h-box_h-scroll_h<20){
        //         getList();
        //     }
        // });
    </script>
</body>

</html>